<template>
  <div>
    <!-- 搜索栏 -->
    <el-card id="search">
      <el-row>
        <el-col :span="20">
          <el-input
            v-model="searchModel.announcementName"
            placeholder="公告名字"
            clearable
          />
          <el-input
            v-model="searchModel.announcementNumber"
            placeholder="公告编号"
            clearable
          />
          <el-select v-model="searchModel.resource" placeholder="请选择来源">
            <el-option
              v-for="item in resourceList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button
            type="primary"
            round
            icon="el-icon-search"
            @click="getCrawlerList"
          >查询
          </el-button>
        </el-col>
        <el-col :span="4" align="right">
          <el-button
            type="primary"
            icon="el-icon-plus"
            circle
            @click="openEditUI(null)"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 结果列表 -->
    <el-card>
      <el-table
        :data="crawlerList"
        stripe
        style="width: 100%"
        ref="tableContainer"
      >
        <el-table-column label="#" width="80">
          <template slot-scope="scope">
            <!-- (pageNo-1) * pageSize + index + 1 -->
            {{
              (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="insertTime" label="采集时间" width="100"/>
        <el-table-column prop="noticeImage" label="标的照片" width="150">
          <template slot-scope="scope">
            <div class="thumbnail-container" @dblclick="openImage(scope.row.noticeImage)">
              <img
                :src="scope.row.noticeImage"
                alt="缩略图"
                class="thumbnail"
                @mouseover="showPreview($event, scope.row.noticeImage)"
                @mouseout="hidePreview"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="announcementName" label="公告名字" width="150"/>
        <el-table-column prop="announcementNumber" label="公告编号" width="150"/>
        <el-table-column prop="publishTime" label="发布时间" width="180"/>
        <el-table-column prop="price" label="价格" width="100"/>
        <el-table-column prop="biddingStartTime" label="竞价日期" width="160"/>
        <el-table-column prop="area" label="地区" width="100"/>
        <el-table-column prop="goodsType" label="货物类型" width="100"/>
        <el-table-column prop="resource" label="标的来源" width="100"/>
        <el-table-column prop="goodsDetails" label="标的详情" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="showDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="网站URL" width="180">
          <template slot-scope="scope">
            <a :href="scope.row.url" target="_blank" class="blue-link">{{ scope.row.url }}</a>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <img
      v-if="previewVisible"
      :src="previewSrc"
      alt="预览图"
      class="image-preview"
      :style="previewStyle"
    />
    <!-- 分页组件 -->
    <el-pagination
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!--新增-->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="clearForm"
    >
      <el-form ref="crawlerFormRef" :model="crawlerForm">
        <el-form-item
          label="来源"
          prop="resource"
          :label-width="formLabelWidth"
        >
          <el-select v-model="crawlerForm.resource" placeholder="请选择来源" style="width: 100%;">
            <el-option
              v-for="item in resourceList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="关键词"
          prop="keyWord"
          :label-width="formLabelWidth"
        >
          <el-input v-model="crawlerForm.keyWord" autocomplete="off"/>
        </el-form-item>
        <el-form-item
          label="采集起始页"
          prop="pageNum"
          :label-width="formLabelWidth"
        >
          <el-input v-model="crawlerForm.pageNum" autocomplete="off"/>
        </el-form-item>
        <el-form-item
          label="每页的数量"
          prop="pageSize"
          :label-width="formLabelWidth"
        >
          <el-input v-model="crawlerForm.pageSize" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCrawler">确 定</el-button>
      </div>
    </el-dialog>
    <!--展示详情-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <!--      点击预览-->
      <!-- 将 span 改为可点击的 a 链接，并绑定点击事件 -->
      <div style="width: 100%;">
        <a href="javascript:void(0)" class="blue-link" @click="previewFile(currentRowData.goodsFile)">预览文件</a>
      </div>
      <span>{{ currentRowData.goodsDetails }}</span>

      <div v-if="currentRowData.goodsImages && currentRowData.goodsImages.length" class="goods-images">
        <p>相关图片：</p>
        <div class="image-list">
          <div
            v-for="(image, index) in currentRowData.goodsImages"
            :key="index"
            class="image-item"
            @dblclick="previewImage(image)"
          >
            <img
              :src="image"
              :alt="'图片 ' + (index + 1)"
              class="goods-image2"
            />
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 图片预览弹窗 -->
    <el-dialog
      :visible.sync="previewDialogVisible"
      width="60%"
      title="图片预览"
      append-to-body
    >
      <div style="text-align: center;">
        <img :src="selectedImage" alt="预览图" style="max-width: 100%; max-height: 80vh;"/>
      </div>
    </el-dialog>
    <!--文件预览-->
    <el-dialog :visible.sync="filePreviewVisible" title="文件预览" width="80%">
      <iframe
        :src="filePreviewUrl"
        style="width: 100%; height: 600px; border: none;"
        v-if="filePreviewUrl"
      ></iframe>
    </el-dialog>
  </div>
</template>

<script>
import userApi from '@/api/userManage'

export default {
  data() {
    return {
      previewVisible: false,
      previewSrc: '',
      previewStyle: {
        left: '0px',
        top: '10px'
      },
      formLabelWidth: '130px',
      crawlerForm: {
        resource: '',
        keyWord: '',
        pageNum: '',
        pageSize: ''
      },
      dialogVisible: false,
      currentRowData: {
        goodsFile: '1'
      }, // 新增：用于保存当前行数据
      dialogFormVisible: false,
      title: '',
      total: 0,
      searchModel: {
        announcementName: '',
        announcementNumber: '',
        resource: '',
        pageNo: 1,
        pageSize: 10
      },
      crawlerList: [],
      previewDialogVisible: false,
      selectedImage: '',
      resourceList: [],
      filePreviewVisible: false,
      filePreviewUrl: null
    }
  },
  created() {
    this.getCrawlerList()
    this.getResourceList()
  },
  methods: {
    previewFile(goodsFile) {
      const a = document.createElement('a')
      a.href = 'http://101.201.64.236:9999/prod-api/crawler/file/preview?goodsFile=' + goodsFile
      a.hidden = true
      a.target = '_blank' // 新开1个页面
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },
    // 显示预览图片
    previewImage(imageUrl) {
      this.selectedImage = imageUrl
      this.previewDialogVisible = true
    },
    showPreview(event, src) {
      const imgWidth = 500 // 最大宽度
      const imgHeight = 500// 最大高度

      // 获取表格容器的滚动偏移量
      const tableContainer = this.$refs.tableContainer.$el.querySelector('.el-table__body-wrapper')
      const scrollTop = tableContainer.scrollTop

      // 屏幕中央坐标 + 表格容器滚动偏移量
      const left = (window.innerWidth - imgWidth) / 2 + window.scrollX
      const top = (window.innerHeight - imgHeight) / 2 + scrollTop // 使用 scrollTop 而不是 scrollY

      this.previewStyle = {
        left: `${left}px`,
        top: `${top}px`
      }
      this.previewSrc = src
      this.previewVisible = true
    },
    hidePreview() {
      this.previewVisible = false
    },
    openImage(url) {
      window.open(url, '_blank')
    },
    showDetail(row) {
      this.dialogVisible = true
      this.currentRowData = row
    },
    clearForm() {
      this.crawlerForm = {
        resource: '',
        keyWord: '',
        pageNum: '',
        pageSize: ''
      }
      this.$refs.crawlerFormRef.clearValidate()
    },
    saveCrawler() {
      // 提交请求给后台
      userApi.saveCrawler(this.crawlerForm).then(response => {
        // 成功提示
        this.$message({
          message: response.message,
          type: 'success'
        })
        // 刷新表格
        this.getCrawlerList()
      })
      // 关闭对话框
      this.dialogFormVisible = false
    },
    getResourceList() {
      userApi.getCrawlerConfigSpecial().then(response => {
        this.resourceList = response.data
      })
    },
    openEditUI(id) {
      if (id == null) {
        this.title = '新增用户'
        userApi.getCrawlerConfigSpecial().then(response => {
          this.resourceList = response.data
        })
      } else {
        this.title = '修改用户'
        // 根据id查询用户数据
        userApi.getUserById(id).then(response => {
          this.userForm = response.data
        })
      }
      this.dialogFormVisible = true
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize
      this.getCrawlerList()
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo
      this.getCrawlerList()
    },
    getCrawlerList() {
      userApi.getCrawlerList(this.searchModel).then((response) => {
        this.crawlerList = response.data.rows
        this.total = response.data.total
      })
    }
  }
}
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 85%;
}

.thumbnail-container {
  position: relative;
  display: inline-block;
}

.thumbnail {
  width: 100px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.image-preview {
  position: fixed;
  z-index: 9999;
  max-width: 500px;
  max-height: 500px;
  object-fit: contain;
  border: 2px solid #666;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.goods-images {
  margin-top: 20px;
}

.goods-images p {
  font-weight: bold;
}

.image-item {
  display: inline-block;
  margin: 5px;
  text-align: center;
}

.goods-image {
  width: 100px;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  border: 1px solid #ddd;
  padding: 4px;
  border-radius: 4px;
}

.goods-images {
  margin-top: 15px;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  width: 100px;
  height: 100px;
}

.image-item:hover {
  transform: scale(1.1);
}

.goods-image2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

</style>
